﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div id="pay-way"></div>
    <div class="chart-content">
      <div class="filter-title">
        <div>
          <el-radio-group v-model="listQuery.date"
                          @change="filterData">
            <el-radio :label="1">月</el-radio>
            <el-radio :label="3">季度</el-radio>
            <el-radio :label="4">年</el-radio>
          </el-radio-group>
        </div>
        <div class="filter-right">
          <el-button type="primary">导出</el-button>
        </div>
      </div>
      <div class="chart-list">
        <el-table :key="tableKey"
                  v-loading="listLoading"
                  :data="list"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255,255,255,0.2)"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%min-height:1000px">
          <el-table-column fixed="left"
                           align="center"
                           :label="$t('table.id')"
                           width="65">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('pay.type')">
            <template slot-scope="scope">
              <span>{{ paymentMethodEs(scope.row.pay_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(5)">
            <template slot-scope="scope">
              <span>{{ scope.row[5] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(4)">
            <template slot-scope="scope">
              <span>{{ scope.row[4] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(3)">
            <template slot-scope="scope">
              <span>{{ scope.row[3] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(2)">
            <template slot-scope="scope">
              <span>{{ scope.row[2] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(1)">
            <template slot-scope="scope">
              <span>{{ scope.row[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="showDate(0)">
            <template slot-scope="scope">
              <span>{{ scope.row[0] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background
                       :current-page="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import echarts from "echarts";
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      checkAll: false,
      circleCheckAll: false,
      equipmentCheckAll: false,
      showDateStyle: 1,
      listQuery: {
        page: 1,
        limit: 20,
        date: 1,
        category_id: [],
        merchant_circle_id: [],
        itoc_id: undefined,
        admin_region_id: []
      },
      itocOptions: [],
      itocCount: 0,
      circleOptions: [],
      districtsOptions: [],
      goodsSortOptions: [],
      goodsOptions: [],
      goodsCount: undefined,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        select: "筛选"
      },
      filterDisabled: false,
      pageSize: 20
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        date: this.listQuery.date ? this.listQuery.date : 1
      };
      const path = {
        app: "equipment",
        api: "api_equipment_order_payTypeStat",
        version: "1.0",
        type: 2,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 筛选终端销售统计
    filterData() {
      this.getList();
      this.dialogFormVisible = false;
      this.showDateStyle = this.listQuery.date;
    },
    // 多选
    handleCheckedCitiesChange(value, options, all) {
      let checkedCount = value.length;
      this[all] = checkedCount === this[options].length;
    },
    // 全选
    handleCheckAllChange(val, options, name) {
      let all = [];
      if (val) {
        const officers = this[options];
        all = officers.map(function(officer) {
          return officer.id
        });
      }
      this.listQuery[name] = all;
    },
    showPayWay(wxpay, zfbpay) {
      const option = {
        color: ['rgba(176, 212, 251, 1)'],
        legend: {
          show: true,
          itemGap: 12,
          orient: 'vertical',
          right: '15%',
          top: "center",
          data: ['支付宝支付', '微信支付'],
          formatter: function(name) {
            // 获取legend显示内容
            let data = option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }
            let p = (tarValue / total * 100).toFixed(2);
            return name + ' ' + ' ' + p + '%';
          }
        },

        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['50%', '66%'],
          center: ["30%", "53%"],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: zfbpay,
            name: '支付宝支付',
            itemStyle: {
              normal: {
                color: "#FFB300",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '微信支付',
            value: wxpay,
            itemStyle: {
              normal: {
                color: "#6F86FF",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }]
        }]
      };
      const payChart = document.getElementById("pay-way");
      const myChartPay = echarts.init(payChart);
      myChartPay.setOption(option);
      window.onresize = myChartPay.resize;
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_equipment_order_payTypeStat") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
            let wxpay = 0;
            let zfbpay = 0;
            resj.data.forEach(element => {
              if (element.pay_type === 1) {
                wxpay += parseInt(element[0]) + parseInt(element[1]) + parseInt(element[2]) + parseInt(element[3]) + parseInt(element[4]) + parseInt(element[5])
              } else if (element.pay_type === 2) {
                zfbpay += parseInt(element[0]) + parseInt(element[1]) + parseInt(element[2]) + parseInt(element[3]) + parseInt(element[4]) + parseInt(element[5])
              }
            });
            this.showPayWay(wxpay, zfbpay)
          }
        }
      }
    },
    // 显示时间格式
    showDate(data) {
      return this.dateEs(this.showDateStyle, data);
    }
  }
};
</script>
<style scoped>
#pay-way {
  width: 100%;
  height: 400px;
}
</style>
